<template>
    <div class="user-auth">
        <el-form ref="formRef" :model="formData" :rules="rules" size="large"
                 label-position="right" label-width="220px"
                 require-asterisk-position="right">
            <el-card header="作者详情">
                <el-form-item prop="hasOtherPlatform" label="是否有其他存在自媒体平台">
                    <dict-segmented width="400px" v-model="formData.hasOtherPlatform" type="yes_or_no"/>
                </el-form-item>
                <el-form-item prop="platformName" label="自媒体平台名称">
                    <el-input placeholder="请输入平台名称" :maxlength="50" v-model="formData.platformName"
                              clearable></el-input>
                </el-form-item>
                <el-form-item prop="goodStyle" label="擅长风格">
                    <el-input placeholder="请输入擅长风格" :maxlength="50" v-model="formData.goodStyle"
                              clearable></el-input>
                </el-form-item>
            </el-card>

            <el-card header="作品详情" class="mt-4">
                <el-form-item prop="originalWorkLike" label="原作品“点赞、收藏”数量">
                    <el-input-number v-model="formData.originalWorkLike" :min="0" :max="100000000"/>
                </el-form-item>
                <el-form-item prop="releaseWorkNum" label="发布作品数">
                    <el-input-number v-model="formData.releaseWorkNum" :min="0" :max="100000000"/>
                </el-form-item>
                <el-form-item prop="hasOtherPlatformShort" label="是否有其他平台已上架短剧">
                    <dict-segmented width="400px" v-model="formData.hasOtherPlatformShort" type="yes_or_no"/>
                </el-form-item>
                <el-form-item prop="workName" label="作品名称（挑选代表作即可）">
                    <el-input placeholder="请输入作品名称" :maxlength="100" v-model="formData.workName"
                              clearable></el-input>
                </el-form-item>
                <el-form-item prop="copyrightRatio" label="版权分成比例">
                    <el-input-number v-model="formData.copyrightRatio" :step="0.01" :min="0"
                                     :max="100"></el-input-number>
                    <span class="pl-2">%</span>
                </el-form-item>
            </el-card>

            <div class="bottom-buttons relative">
                <el-button
                    type="primary"
                    @click="onSubmit">
                    保存
                </el-button>
                <router-link to="./index">
                    <el-button type="danger" plain>取消</el-button>
                </router-link>
            </div>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref, reactive, computed} from 'vue'
import DictSegmented from '@/components/dictionary/segmented.vue'
import {useAuthStore} from "@/stores/modules/auth";
import {message} from '@/Hooks/Element-plus'
import {useRouter} from "vue-router";

const authStore = useAuthStore();
const router = useRouter();

const formRef = ref()
const formData = reactive({
    hasOtherPlatform: 0,//必填
    platformName: '',
    goodStyle: '',//必填
    originalWorkLike: undefined,
    releaseWorkNum: undefined,
    hasOtherPlatformShort: 0,
    workName: '',
    copyrightRatio: undefined
})
const rules = ref({
    hasOtherPlatform: [
        {required: true, message: '请选择是否有其他平台', trigger: 'blur'}
    ],
    goodStyle: [
        {required: true, message: '请输入擅长风格', trigger: 'blur'}
    ],
    workName: [
        {required: true, message: '请输入作品名称', trigger: 'blur'}
    ]
})

const onSubmit = () => {
    formRef.value.validate((valid: Boolean) => {
        if (!valid) {
            return;
        }

        authStore.updateAuthInfo(formData);
        message('success', '提交成功')
        router.replace('./index')
    })
}
const getData = () => {
    Object.assign(formData, authStore.authInfo)
}
getData();
</script>

<style lang="scss" scoped>

.user-auth {
    :deep(.el-input) {
        --el-input-width: 400px;
    }
}
</style>
